<template>
    <div id="activityMore">
        <div id="content">
            <div class="title">更多玩法</div>
            <div class="dialog-box">
                <div class="dialog-box-inner">
                    <div class="dialog-box-content">您想要什么活动形式，尽管告诉我们。毕竟我们每月都更新，说不定哪天技术哥哥心情好，就给您做好了。</div>
                </div>
            </div>
            <div class="activity-proposal">
                <div class="proposal-list">
                    <div class="proposal-label">活动形式描述</div>
                    <div class="proposal-text">
                        <textarea cols="30" rows="8" placeholder="详细描述活动展现形式，参与方式，玩法等" class="ng-pristine ng-untouched ng-valid"></textarea>
                    </div>
                </div>
                <div class="proposal-list">
                    <div class="proposal-label">活动来源</div>
                    <div class="proposal-text">
                        <input type="text" placeholder="在哪个APP还是公众号看到的" class="ng-pristine ng-untouched ng-valid"></div>
                    </div>
                    <div class="proposal-list">
                        <div class="proposal-label">活动参考图片</div>
                        <div class="upload-cankao clearfix">
                            <div class="upload-cankao-list">
                                <div class="cankao-template">
                                    <input type="file" id="upload-input" class="cankao-upload-input">
                                    <label class="upload-label">+</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button class="proposal-submit blue-button">提交</button>
                </div>
        </div>
    </div>
</template>

<script>
	import * as api from './../api/api';
    export default {
        data(){
            return {
               
            }
        },
        mounted(){
            
        },
        computed: {

        },
        methods: {
           
        }
        
    }
</script>

<style lang="less" scoped>
    *{
        box-sizing: border-box;
    }
    #activityMore{
        background: #f4f8fb;
        padding: 40px;
        #content{
            background: #ffffff;
            .title{
                height: 52px;
                line-height: 52px;
                font-size: 18px;
                color: #555;
                border-bottom: 1px solid #e8e8e8;
                padding-left: 30px;
            }
            .dialog-box {
                width: 100%;
                height: auto;
                padding: 20px 30px;
                .dialog-box-inner {
                    width: 100%;
                    height: 195px;
                    background: url('../assets/img/more_play_DialogBox.png') left center no-repeat;
                    background-size: auto 100%;
                    position: relative;
                    .dialog-box-content{
                        font-size: 18px;
                        color: #fff;
                        position: absolute;
                        width: 564px;
                        height: 84px;
                        top: 54px;
                        left: 268px;
                        padding: 10px 26px;
                        line-height: 34px;
                    }
                }
            }
            .activity-proposal{
                padding: 0 20px 26px;
                .proposal-list{
                    margin-top: 30px;
                    .proposal-label{
                        font-size: 14px;
                        color: #333;
                    }
                    .proposal-text{
                        width: 834px;
                        margin-top: 8px;
                        textarea{
                            padding: 10px;
                            width: 100%;
                            border: 1px solid #ccc;
                            resize: none;
                            border-radius: 6px;
                            font-size: 12px;
                            color: #666;
                            min-height: 34px;
                            outline: 0;
                            margin: 0;
                        }
                        input{
                            padding: 0 10px;
                            width: 100%;
                            border: 1px solid #ccc;
                            resize: none;
                            border-radius: 6px;
                            font-size: 12px;
                            color: #666;
                            min-height: 34px;
                            outline: 0;
                        }
                    }
                }
            }
        }
    }

    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
     /* WebKit browsers */ 
    color: #cfcfcf; 
    } 
    input:-moz-placeholder, textarea:-moz-placeholder { 
    /* Mozilla Firefox 4 to 18 */ 
    color: #cfcfcf; 
    } 
    input::-moz-placeholder, textarea::-moz-placeholder { 
     /* Mozilla Firefox 19+ */ 
    color: #cfcfcf; 
    } 
    input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
     /* Internet Explorer 10+ */ 
    color: #cfcfcf; 
    }
    .proposal-submit {
        width: 178px;
        height: 38px;
        color: #fff;
        border-radius: 6px;
        border: none;
        margin-top: 10px;
        cursor: pointer;
        font-size: 14px;
        line-height: 38px;
        display: block;
        text-align: center;
        background-color: #2db7f5;
        outline: 0!important;
        box-shadow: none!important;
    }
    .upload-cankao {
        width: 872px;
        height: auto;
        margin-top: 10px;
    }
    .clearfix:after, .clearfix:before {
        display: table;
        content: "";
        line-height: 0;
    }
    .upload-cankao .upload-cankao-list {
        width: 178px;
        float: left;
        margin-right: 40px;
        margin-bottom: 30px;
    }
    .cankao-template {
        position: relative;
        width: 178px;
        height: 278px;
        border: 1px solid #ccc;
        border-radius: 6px;
        overflow: hidden;
    }
    input[type=file] {
        display: block;
    }
    .cankao-upload-input {
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        z-index: 10;
    }
    .cankao-upload-input, .upload-label {
        width: 68px;
        height: 68px;
        top: 50%;
        margin-top: -34px;
        margin-left: -34px;
        left: 50%;
        position: absolute;
        cursor: pointer;
    }
    input {
        outline: 0!important;
        box-shadow: none!important;
    }
    .upload-label {
        display: block;
        text-align: center;
        line-height: 68px;
        z-index: 5;
        border: 1px dashed #ccc;
        font-size: 30px;
        margin-bottom: 5px;
        font-weight: 400;
    }
    body .clearfix:after {
        display: block;
        content: "";
        visibility: hidden;
        height: 0;
        clear:both;
    }

</style>
